<template>
  <el-main>
    <el-row :gutter="15">
      <el-col :lg="12">
        <el-card shadow="never" header="导入(使用mock,有50%几率导入失败)">
          <sc-file-import :apiObj="$API.common.importFile" templateUrl="http://www.scuiadmin/file.xlsx" @success="success"></sc-file-import>
          <sc-file-import :apiObj="$API.common.importFile" :data="{ otherData: 'demo' }" templateUrl="http://www.scuiadmin/file.xlsx" accept=".xls, .xlsx" :maxSize="30" tip="请上传小于或等于 30M 的 .xls, .xlsx 格式文件(自定义TIP)" @success="success">
            <template #default="{ open }">
              <el-button type="primary" icon="sc-icon-upload" @click="open">导入(全配置)</el-button>
            </template>
            <template #uploader>
              <el-icon class="el-icon--upload"><sc-icon-file-excel /></el-icon>
              <div class="el-upload__text">将文件拖到此处或 <em>点击选择文件上传</em></div>
            </template>
            <template #form="{ formData }">
              <el-form-item label="覆盖已有数据">
                <el-switch v-model="formData.coverage" />
              </el-form-item>
              <el-form-item label="跳过错误数据">
                <el-switch v-model="formData.skipError" />
              </el-form-item>
            </template>
          </sc-file-import>
          <el-descriptions :column="1" border size="small" style="margin-top: 15px">
            <el-descriptions-item label="apiObj" :width="200">Object 文件上传接口对象</el-descriptions-item>
            <el-descriptions-item label="data">Object 上传时附带的额外参数</el-descriptions-item>
            <el-descriptions-item label="accept">String 可选择文件类型，默认为".xls, .xlsx"</el-descriptions-item>
            <el-descriptions-item label="maxSize">Number 可选择文件大小，单位为M，默认为10</el-descriptions-item>
            <el-descriptions-item label="tip">String 上传框底下的提示语句，默认为"请上传小于或等于 {maxSize}M 的 {accept} 格式文件"</el-descriptions-item>
            <el-descriptions-item label="templateUrl">String 模板的下载URL</el-descriptions-item>
            <el-descriptions-item label="@success">事件 上传接口返回的事件，返回function(res, close)，执行close()将关闭窗口</el-descriptions-item>
            <el-descriptions-item label='#default="{open}"'>插糟 默认触发按钮插糟，返回open()打开窗口函数，可以绑定元素@click事件</el-descriptions-item>
            <el-descriptions-item label="#uploader">插糟 自定义上传框插槽</el-descriptions-item>
            <el-descriptions-item label='#form="{formData}"'>插糟 自定义表单组件，插槽formData都将作为上传时附带的额外参数</el-descriptions-item>
          </el-descriptions>
        </el-card>
      </el-col>
      <el-col :lg="12">
        <el-card shadow="never" header="导出">
          <sc-file-export :apiObj="$API.common.exportFile"></sc-file-export>
          <sc-file-export :apiObj="$API.common.exportFile" fileName="人员列表(异步)" async>
            <template #default="{ open }">
              <el-button type="primary" icon="sc-icon-download" @click="open">导出(异步)</el-button>
            </template>
          </sc-file-export>
          <sc-file-export :apiObj="$API.common.exportFile" blob fileName="人员列表" :data="{ otherData: 'demo' }" showData :column="column" :fileTypes="['xlsx', 'docx', 'pdf']">
            <template #default="{ open }">
              <el-button type="primary" icon="sc-icon-download" @click="open">导出(blob文件流)</el-button>
            </template>
            <template #form="{ formData }">
              <el-form-item label="导出条数">
                <el-select v-model="formData.limit" placeholder="Select">
                  <el-option label="100条" value="100" />
                  <el-option label="500条" value="500" />
                  <el-option label="1000条" value="1000" />
                  <el-option label="5000条" value="5000" />
                  <el-option label="10000条" value="10000" />
                </el-select>
              </el-form-item>
            </template>
          </sc-file-export>
          <el-descriptions :column="1" border size="small" style="margin-top: 15px">
            <el-descriptions-item label="apiObj" :width="200">Object 文件导出接口对象，通过apiObj.url请求文件</el-descriptions-item>
            <el-descriptions-item label="data">Object 上传时附带的额外参数(可为数据表格的过滤项)</el-descriptions-item>
            <el-descriptions-item label="showData">Boolean 是否显示附带的额外参数</el-descriptions-item>
            <el-descriptions-item label="async">Boolean 是否异步导出文件</el-descriptions-item>
            <el-descriptions-item label="fileName">String 下载文件名称，默认为当前时间戳</el-descriptions-item>
            <el-descriptions-item label="fileTypes">Array 可选择文件类型，默认为['xlsx']，组件将数组第一项当做已选项</el-descriptions-item>
            <el-descriptions-item label="column">Array 列配置，请求文件时将添加column为key的参数，值为prop逗号","分割的字符串</el-descriptions-item>
            <el-descriptions-item label="blob">Boolean 是否由游览器请求文件返回blob后提供下载</el-descriptions-item>
            <el-descriptions-item label="progress">Boolean blob开启后是否显示下载文件进度条，当服务器启用Gzip时，建议关闭，因为获取到的文件总数和下载总数不匹配。</el-descriptions-item>

            <el-descriptions-item label='#default="{open}"'>插糟 默认触发按钮插糟，返回open()打开窗口函数，可以绑定元素@click事件</el-descriptions-item>
            <el-descriptions-item label='#form="{formData}"'>插糟 自定义表单组件，插槽formData都将作为请求时附带的额外参数</el-descriptions-item>
          </el-descriptions>
        </el-card>
      </el-col>
    </el-row>
  </el-main>

  <el-dialog
    v-model="importErrDialogVisible"
    title="导入失败"
    :width="680"
    destroy-on-close
    @closed="
      () => {
        importErrData = {}
      }
    "
  >
    <el-alert :title="`总条目数 ${importErrData.ok} ,其中有 ${importErrData.fail} 条格式不满足导入要求，请修改后再次操作。`" type="error" show-icon :closable="false" />
    <div style="margin-top: 15px">
      <el-table :data="importErrData.failList" border stripe max-height="270" style="width: 100%">
        <el-table-column prop="keyName" label="主键名" width="180" />
        <el-table-column prop="" label="状态" width="100">
          <el-tag type="danger"
            ><el-icon><el-icon-circle-close-filled /></el-icon> 失败</el-tag
          >
        </el-table-column>
        <el-table-column prop="reason" label="原因" />
      </el-table>
    </div>
    <template #footer>
      <el-button type="primary" @click="importErrDialogVisible = false">我知道了</el-button>
    </template>
  </el-dialog>
</template>

<script>
import scFileImport from '@/components/scFileImport'
import scFileExport from '@/components/scFileExport'

export default {
  name: 'importexport',
  components: {
    scFileImport,
    scFileExport,
  },
  data() {
    return {
      importErrDialogVisible: false,
      importErrData: {},
      column: [
        {
          label: '姓名',
          prop: 'name',
        },
        {
          label: '性别',
          prop: 'sex',
        },
        {
          label: '评分',
          prop: 'num',
        },
        {
          label: '邮箱',
          prop: 'email',
          hide: true,
        },
        {
          label: '进度',
          prop: 'progress',
        },
        {
          label: '注册时间',
          prop: 'datetime',
        },
      ],
    }
  },
  mounted() {},
  methods: {
    success(res, close) {
      if (res.code === 200) {
        this.$alert('导入返回成功后，可后续操作，比如刷新表格等。执行回调函数close()可关闭上传窗口。', '导入成功', {
          type: 'success',
          showClose: false,
          center: true,
        })
        close()
      } else {
        //返回失败后的自定义操作，这里演示显示错误的条目
        this.importErrDialogVisible = true
        this.importErrData = res.data
      }
    },
  },
}
</script>

<style></style>
